<!--<template lang="html">-->
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面</title>
    <meta name="description" content="黑马面面">
    <meta name="keywords" content="黑马面面">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../css/element-ui.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../css/style.css">

    <script src="../../js/vue.js"></script>
    <script src="../../js/element-ui.js"></script>
    <!--    <script src="../plugins/jquery/dist/jquery.js"></script>-->
    <script src="../../js/data.json"></script>
    <script src="../../js/base.js"></script>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="../../css/Stylesheet.css">
    <script src="../../js/axios-0.18.0.js"></script>
</head>

<body class="hold-transition">
<div id="app" class="main" v-loading="loading">
    <div class="card-header clearfix">
        <div class="answer-card f-l m-l-10">
            <!--图标-->
            <span class="el-icon-date button-top">综合心理健康测评(SCL-90){题库名字}}}</span>
        </div>
        <div class="button-content">
            <el-button type="primary" class="el-icon-upload2 " style="height: 35px;width: 25%" @click="submitPaper">交卷
                <el-button type="info" class="el-icon-view " style="height: 35px;width: 25%" @click="setMark">设置待做
                </el-button>
            </el-button>
            <el-button type="primary" class="el-icon-upload2 " style="height: 35px;width: 25%" @click="tempSubmit">暂时提交
            </el-button>
        </div>
        <div class="button-content">
            <el-button v-for="(item,index) in this.length" :key="index"
                       :type="buttonType(index)"
                       class="stu-answer-item"
                       @click="clickAnswerCard(index)">{{index + 1}}
            </el-button>
        </div>
    </div>
    <div class="card-content">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>第{{questionId + 1}}题（  {{questionTypeText}}  ）{{radio}}</span>
            </div>

            <!--单选-->
            <div class="q-single" v-show="questionType === 2">
                <!--题目-->
                <div class="question1">
                    {{currentQuestion.questionstem}}
                </div>
                <!--选项-->
                <div class="answer">
                    <div class="answer-item" v-for="(item,index) in currentQuestion.choice">
                        <el-radio v-model="radio" :label="index">{{item}}</el-radio>
                    </div>
                </div>
            </div>

            <!-- <el-table :key="tableKey"
                       :data="items"
                       fit
                       highlight-current-row
                       style="width: 100%;">
                 <el-table-column class="q-single" v-show="questionType == 2">

                 </el-table-column>

             </el-table>-->
            <!--
                            &lt;!&ndash;                &lt;!&ndash; 多选 &ndash;&gt;&ndash;&gt;
                            <div class="q-multiple" v-show="questionType == 3">
                                <div class="question">
                                    {{currentQuestion.questionstem}}
                                </div>
                                <div class="answerVo">
                                    <div class="answerVo-item" v-for="(item,index) in currentQuestion.choice">
                                        <el-checkbox v-model="checked[index]" :label="index">{{item}}</el-checkbox>
                                    </div>
                                </div>
                            </div>

                            &lt;!&ndash;                &lt;!&ndash; 判断 &ndash;&gt;&ndash;&gt;
                            <div class="q-true-or-false" v-show="questionType == 4">
                                <div class="question">
                                    {{currentQuestion.questionstem}}
                                </div>
                                <div class="answerVo">
                                    <div class="answerVo-item">
                                        <el-radio v-model="radio" label="0">正确</el-radio>
                                    </div>
                                    <div class="answerVo-item">
                                        <el-radio v-model="radio" label="1">错误</el-radio>
                                    </div>
                                </div>
                            </div>

                            &lt;!&ndash;                &lt;!&ndash; 填空 &ndash;&gt;&ndash;&gt;
                            <div class="q-fill-in" v-show="questionType == 1">
                                <div class="question">
                                    {{currentQuestion.questionstem}}
                                </div>
                                <div class="answerVo">
                                    <div class="answerVo-item">
                                        <el-input
                                                type="textarea"
                                                :rows="5"
                                                placeholder="请输入答案"
                                                v-model="textarea">
                                        </el-input>
                                    </div>
                                </div>
                            </div>

                            &lt;!&ndash;                &lt;!&ndash; 简答 &ndash;&gt;&ndash;&gt;
                            <div class="q-short-answerVo" v-show="questionType == 5">
                                <div class="question">
                                    {{currentQuestion.questionstem}}
                                </div>
                                <div class="answerVo">
                                    <div class="answerVo-item">
                                        <el-input
                                                type="textarea"
                                                :rows="15"
                                                placeholder="请输入答案"
                                                v-model="textarea">
                                        </el-input>
                                    </div>
                                </div>
                            </div>

                            &lt;!&ndash;                &lt;!&ndash; 程序 &ndash;&gt;&ndash;&gt;
                            <div class="q-program" v-show="questionType == 6">
                                <div class="question">
                                    {{currentQuestion.questionstem}}
                                </div>
                                <div class="answerVo">
                                    <div class="answerVo-item">
                                        <el-input
                                                type="textarea"
                                                :rows="15"
                                                placeholder="请输入答案"
                                                v-model="textarea">
                                        </el-input>
                                    </div>
                                </div>
                            </div>
                            -->

            <el-button style="float: left;margin-bottom: 10px" type="primary" @click="BackQuestion">上一题</el-button>
            <el-button style="float: left;" type="primary" @click="nextQuestion">下一题</el-button>
        </el-card>
    </div>

</div>
<span>111</span>
</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                markFlag: [],
                loading: false,
                // 问题的长度
                length: 0,
                // 弹窗
                dialogVisible: false,
                // 题目列表
                currentQuestion: {},
                // currentQuestion: [],
                // 后台获取的所有数据
                questionList: [
                    {markFlag: 0}
                ],
                // 题目类型
                questionType: 2,
                textarea: '',
                // 单选
                radio: '',
                checked: [],
                // 题目id
                questionId: 0,
                instId: 1,
                // 选项
                transformChar: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                // 开始时间（不用）
                startTime: '',
                // 结束时间（不用）
                endTime: '',
                hour: 0,
                min: 0,
                sec: 0,
                timer: 0,
                // 离开页面时间
                onblurTime: 0,
            }
        },
        computed: {
            // 看看是什么类型
            questionTypeText: function () {
                switch (this.questionType) {
                    case 1://填空
                        return '填空题';
                        break;
                    case 2://选择
                        return '单选题';
                        break;
                    case 3://多选
                        return '多选题';
                        break;
                    case 4://判断
                        return '判断题';
                        break;
                    case 5://简答
                        return '简答题';
                        break;
                    case 6://程序
                        return '程序题';
                        break;
                }
            }
        },
        methods: {
            // 切换第几题颜色
            buttonType(index) {
                let answer = this.questionList.questions[index].answer;
                // console.log("answerVo====" + answerVo);
                if (answer === 'undefined' || answer === null) {
                    return "plain";
                } else if (this.markFlag[index] === 1) {
                    return "info";
                } else {
                    return "primary";
                }

            },
            // 加载题目
            initExam() {
                if (typeof this.currentQuestion.answer == 'undefined') {
                    //真数据
                    axios.post('/test/show.do').then(res => {
                        //返回信息
                        this.$message({
                            message: res.data.message,
                            type: res.data.flag ? "success" : "error"
                        });
                        //成功就刷新
                        if (res.data.flag) {
                            // 获取问题
                            this.questionList = res.data.result;
                            this.length = this.questionList.questions.length;
                            // 这个也是获取问题
                            this.currentQuestion = this.questionList.questions[this.questionId];
                            // 获取题目类型
                            this.questionType = parseInt(this.currentQuestion.questionType);
                            // 获取已选答案放入页面中
                            if (typeof this.currentQuestion.answer != 'undefined') {
                                this.setAnswer(this.questionType, this.currentQuestion.answer);
                            }
                            // 如果是多选
                            if (this.questionType === 3) {
                                for (let i = 0; i < this.currentQuestion.choice.length; i++) {
                                    this.checked.push(false);
                                }
                            }
                        }
                    })
                } else {
                    //获取题目
                    this.currentQuestion = this.questionList.questions[this.questionId];
                    // 获取题目类型
                    this.questionType = parseInt(this.currentQuestion.questionType);
                    // 获取已选答案放入页面中
                    if (typeof this.currentQuestion.answer != 'undefined') {
                        this.setAnswer(this.questionType, this.currentQuestion.answer);
                    }
                    // 如果是多选
                    if (this.questionType === 3) {
                        for (let i = 0; i < this.currentQuestion.choice.length; i++) {
                            this.checked.push(false);
                        }
                    }
                }
                //假数据开始
                /*
                let respData = {
                    "respCode": "1",
                    "instId": 1,
                    "startTime": "2018-02-05 14:33:20",
                    "endTime": "2018-02-05 21:00:00",
                    "questions": [{
                        "questionstem": "头痛1111",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }, {
                        "questionstem": "22222打发斯蒂芬打算发大水",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }, {
                        "questionstem": "333333打发斯蒂芬打算发大水",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }, {
                        "questionstem": "444444dfjaslkfjalksdjflkasjti题干？",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }, {
                        "questionstem": "5555的飞洒发斯蒂芬啊大丰收sad",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }, {
                        "questionstem": "666666请选择正确的答案。。。。。。。。",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }, {
                        "questionstem": "7777请选择正确的答案。。。。。。。。",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }, {
                        "questionstem": "8888的飞洒发斯蒂芬啊大丰收sad",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }, {
                        "questionstem": "999999dfjaslkfjalksdjflkasjti题干？",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],

                        "questionType": 2
                    }, {
                        "questionstem": "10的飞洒发斯蒂芬啊大丰收sad",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }, {
                        "questionstem": "11的飞洒发斯蒂芬啊大丰收sad",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }, {
                        "questionstem": "12dfjaslkfjalksdjflkasjti题干？",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }, {
                        "questionstem": "13的飞洒发斯蒂芬啊大丰收sad",
                        "choice": ["没有", "很轻", "中等", "偏重", "严重"],
                        "questionType": 2
                    }],
                }
                // 获取题目内容
                this.questionList = respData.questions;
                // 获取题目id
                this.questionId = parseInt(this.questionId);//当前题号
                // 获取题目+选项
                this.currentQuestion = this.questionList[this.questionId - 1];//老
                // （这里获取到位）获取题目类型
                this.questionType = parseInt(this.currentQuestion.questionType);
                // 获取已选答案
                if (typeof this.currentQuestion.answerVo != 'undefined') {
                    this.setAnswer(this.questionType, this.currentQuestion.answerVo);
                }
                // 如果是多选
                if (this.questionType === 3) {
                    for (let i = 0; i < this.currentQuestion.choice.length; i++) {
                        this.checked.push(false);
                    }
                }
                */
                //假数据结束
                // 离开页面时的操作，暂时不要
                /* let that = this;
                window.onblur = function () {
                    that.onblurTime++;
                    if (that.onblurTime === 2) {

                        that.submitPaper();
                        this.$confirm("你已交卷", '提示', {
                            confirmButtonText: '确定',
                            type: 'error'
                        });
                    } else {
                        this.$confirm("考试期间不能离开此页面哦~这一次只是提醒，下次离开就会直接交卷了哦", '提示', {
                            confirmButtonText: '确定',
                            type: 'error'
                        });
                    }

                }*/
                // 时间 暂时不要
                /*this.timer = window.setInterval(() => {

                    let timeLast = new Date(this.endTime).getTime() - new Date().getTime();
                    let hour = parseInt(timeLast / (1000 * 60 * 60));
                    let min = parseInt((timeLast % (1000 * 60 * 60)) / (1000 * 60));
                    let sec = parseInt(((timeLast % (1000 * 60 * 60)) % (1000 * 60)) / 1000);
                    this.hour = hour < 10 ? '0' + hour : hour;
                    this.min = min < 10 ? '0' + min : min;
                    this.sec = sec < 10 ? '0' + sec : sec;

                    if (this.hour == 0 && this.min == 0 && this.sec == 0) {
                        window.clearInterval(this.timer);
                        this.submitPaper();
                    }

                }, 1000)*/

            },
            // 设置待做
            setMark() {
                let id = this.questionId;
                if (this.markFlag[id] === 1) this.markFlag[id] = 0;
                else this.markFlag[id] = 1;
                //通过id加减来刷新页面
                this.refresh();
            },
            // 应该是交卷(完成一半)
            submitPaper() {
                this.loading = true;
                // 在页面内
                window.onblur = null;
                // 保存当前选项
                this.saveAnswer(false);
                // 定义收答案的
                let answer = [];
                // 收答案
                for (let i = 0; i < this.length; i++) {
                    let questions = this.questionList.questions[i]
                    switch (this.questionList.questions[i].questionType) {
                        case 1://填空
                        case 5:
                        case 6:
                            answer[i] = this.questionList[i].answer;
                            break;
                        case 2://选择
                            // if (i === this.length - 1) answerVo = answerVo + questions.answerVo + "]";
                            // else answerVo = answerVo + questions.answerVo + ",";
                            // answerVo = answerVo + questions.answerVo + ",";
                            answer[i] = questions.answer;
                            break;
                        case 4://判断
                            if (this.questionList[i].answer === '0') {
                                answer[i] = '1';
                            } else {
                                answer[i] = '0';
                            }
                            break;
                        case 3://多选
                            for (let j = 0; j < this.questionList[i].answer; j++) {
                                if (this.questionList[i].answer[j]) {
                                    answer[i] += this.transformChar[j];
                                }
                            }
                            break;
                    }

                }
                axios.post('/answer/submit.do?id=' + this.instId, answer).then(res => {
                    //返回信息
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    //成功就刷新
                    if (res.data.flag) {
                        this.loading = false;
                        window.location.href = "/pages/questionClassicList-stu.html";
                    }
                })
                // 感觉像是axios，交卷然后跳转
                /* httpServer({
                     url: '/exam/submit_paper'
                 }, {
                     instId: this.instId,
                     answerVo: answerVo
                 })
                     .then((res) => {
                         if (res.data.respCode == '1') {
                             // 考试须知，应该是没到考试时间给打回来
                             this.$router.push(`/main/homepage`);
                         }
                     })*/
            },
            // 选择哪一题
            clickAnswerCard(index) {
                // 保存答案
                this.saveAnswer(false);
                // console.log("this.questionId" + this.questionId);
                // console.log("index" + index);
                // 如果是当前题目，直接return
                if (index === this.questionId) {
                    return;
                }
                // 题目id加1
                this.questionId = index;
                // 刷新题目
                this.initExam();
            },
            //清空选项（true是清空最后一题选项？）
            saveAnswer(type) {
                // let questionId = parseInt(this.$route.params.questionId);
                let questionId = parseInt(this.questionId);
                let answer = '';
                //最后一题清空？
                switch (this.questionType) {
                    case 1://填空
                    case 5://简答
                    case 6://程序
                        answer = this.textarea;
                        if (this.questionList.length - 1 === questionId && type) {
                            this.textarea = '';
                        }
                        break;
                    case 2://选择
                    case 4://判断
                        answer = this.radio;
                        if (this.questionList.length - 1 === questionId && type) {
                            //清空选项
                            this.radio = '';
                            console.log("到这了");
                        }
                        break;
                    case 3://多选
                        answer = this.checked;
                        if (this.questionList.length - 1 === questionId && type) {
                            this.checked = [];
                        }
                        break;
                }
                //存到集合里面
                this.questionList.questions[questionId].answer = answer;

            },
            // 下一题（基本完成）
            nextQuestion() {
                // 拿id
                let questionId = parseInt(this.questionId);
                console.log(questionId);
                // 如果是最后一题
                if (this.length - 1 === questionId) {
                    this.$message({
                        showClose: true,
                        message: "这是最后一题啦",
                        type: 'error'
                    });
                    return;
                }
                // 清空选项
                this.saveAnswer(true);
                // console.log(this.questionId)
                // 题目id加1
                this.questionId = questionId + 1;
                // console.log(this.questionId)
                // 刷新题目
                this.initExam();
                // 还是重定向到本页面啊
                // this.$router.push(`/main/exam/${this.$route.params.paperId}/${questionId}`);
            },
            // 上一题（基本完成）
            BackQuestion() {
                // 拿id
                let questionId = parseInt(this.questionId);
                console.log(questionId);

                // 如果是最后一题
                if (0 === questionId) {
                    this.$message({
                        showClose: true,
                        message: "这是第一题啦",
                        type: 'error'
                    });
                    return;
                }
                // 清空选项
                this.saveAnswer(true);
                // 题目id加1
                this.questionId = questionId - 1;
                // 刷新题目
                this.initExam();
                // 还是重定向到本页面啊
                // this.$router.push(`/main/exam/${this.$route.params.paperId}/${questionId}`);
            },
            // 把已选答案放到页面上
            setAnswer(questionType, answer) {
                switch (questionType) {
                    case 1://填空
                    case 5://简答
                    case 6://程序
                        this.textarea = answer;
                        break;
                    case 2://选择
                    case 4://判断
                        this.radio = answer;
                        break;
                    case 3://多选
                        this.checked = answer;
                        break;
                }
            },
            //通过id加减来刷新页面
            refresh() {
                this.questionId++;
                this.questionId--;
            },
            tempSubmit() {
                this.saveAnswer(false);
                for (let i = 0; i < this.length; i++) {
                    let questions = this.questionList.questions[i]
                    switch (this.questionList.questions[i].questionType) {
                        case 1://填空
                        case 5:
                        case 6:
                            answer[i] = this.questionList[i].answer;
                            break;
                        case 2://选择
                            // if (i === this.length - 1) answerVo = answerVo + questions.answerVo + "]";
                            // else answerVo = answerVo + questions.answerVo + ",";
                            // answerVo = answerVo + questions.answerVo + ",";
                            answer[i] = questions.answer;
                            break;
                        case 4://判断
                            if (this.questionList[i].answer === '0') {
                                answer[i] = '1';
                            } else {
                                answer[i] = '0';
                            }
                            break;
                        case 3://多选
                            for (let j = 0; j < this.questionList[i].answer; j++) {
                                if (this.questionList[i].answer[j]) {
                                    answer[i] += this.transformChar[j];
                                }
                            }
                            break;
                    }
                }
                //要提交到暂时保存的地方
                axios.post('/test/submit.do?id=' + this.instId, answer).then(res => {
                    //返回信息
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    //成功就刷新
                    if (res.data.flag) {
                        this.loading = false;
                        window.location.href = "/pages/questionClassicList-stu.html";
                    }
                })
            }
        },
        created() {
            //提示用户是否离开此页面（关闭、刷新或者点击后退等）（先不用）
            /* window.addEventListener("beforeunload", () => {
                 sessionStorage.questions = JSON.stringify(this.questionList);
             });*/
            /*            if (typeof sessionStorage.questions == "undefined") {
                            httpServer({
                                url: '/exam/get_question',
                            }, {
                                paperId: this.$route.params.paperId,
                                instId: sessionStorage.instId,
                            })
                                .then((res) => {*/
            // let respData = res.data;
            /* let respData = {
                 "respCode": "1",
                 "instId": 26,
                 "startTime": "2018-02-05 14:33:20",
                 "endTime": "2018-02-05 21:00:00",
                 "questions": [{
                     "questionstem": "1111dsafdas",
                     "choice": ["dafdsafa"],
                     "questionType": 2
                 }, {
                     "questionstem": "22222打发斯蒂芬打算发大水",
                     "choice": ["fdsfd", "dfsdfsd", "5532g3fgfgf"],
                     "questionType": 2
                 }, {
                     "questionstem": "333333打发斯蒂芬打算发大水",
                     "choice": ["dsfsdfdsfdfdfdfdfds", "fffffffffffffffffffffffffff"],
                     "questionType": 2
                 }, {
                     "questionstem": "444444dfjaslkfjalksdjflkasjti题干？",
                     "questionType": 1
                 }, {
                     "questionstem": "5555的飞洒发斯蒂芬啊大丰收sad",
                     "questionType": 1
                 }, {
                     "questionstem": "666666请选择正确的答案。。。。。。。。",
                     "choice": ["aaaaaaa", "bbbbbbbbbbbb", "cccccccccc", "ddddddddddddddddd"],
                     "questionType": 3
                 }, {
                     "questionstem": "7777请选择正确的答案。。。。。。。。",
                     "choice": ["aaaaaaa", "fffgdfgdfg", "cccccccccc", "ddddddddddddddddd", "ddddddddddddddddd", "ddddddddddddddddd"],
                     "questionType": 3
                 }, {
                     "questionstem": "8888的飞洒发斯蒂芬啊大丰收sad",
                     "questionType": 4
                 }, {
                     "questionstem": "999999dfjaslkfjalksdjflkasjti题干？",
                     "questionType": 4
                 }, {
                     "questionstem": "10的飞洒发斯蒂芬啊大丰收sad",
                     "questionType": 5
                 }, {
                     "questionstem": "11的飞洒发斯蒂芬啊大丰收sad",
                     "questionType": 5
                 }, {
                     "questionstem": "12dfjaslkfjalksdjflkasjti题干？",
                     "questionType": 6
                 }, {
                     "questionstem": "13的飞洒发斯蒂芬啊大丰收sad",
                     "questionType": 6
                 }],
             }

             this.questionList = respData.questions;*/
            // this.startTime = respData.startTime;
            // this.endTime = respData.endTime;
            // 获取用户id
            // this.instId = sessionStorage.instId;
            this.instId = 3;
            //开始时间和结束时间存到session
            // sessionStorage.startTime = respData.startTime;
            // sessionStorage.endTime = respData.endTime;
            // 加载题目
            this.initExam();
            /*       })
           / else {
               this.questionList = JSON.parse(sessionStorage.questions);
               this.startTime = sessionStorage.startTime;
               this.endTime = sessionStorage.endTime;
               this.instId = sessionStorage.instId;
               this.initExam();
           }*/


        },
        watch: {
            $route(to, from) {
                this.questionId = parseInt(this.$route.params.questionId) + 1;
                this.currentQuestion = this.questionList[this.$route.params.questionId];
                this.questionType = parseInt(this.currentQuestion.questionType);
                // 如果有答案就显示到页面上
                if (typeof this.currentQuestion.answer != 'undefined') {
                    this.setAnswer(this.questionType, this.currentQuestion.answer);
                }
                // 多选
                if (this.questionType === 3) {
                    for (let i = 0; i < this.currentQuestion.choice.length; i++) {
                        this.checked.push(false);
                    }
                }
            }
        }
    })
</script>

<style lang="css">
    [v-cloak] {
        display: none;
    }

    .card-header {
        padding: 10px;
        font-size: 20px;
        margin-top: 30px
    }

    .answer-card {
        cursor: pointer;
        width: 100%;
        margin-top: 10px;
    }

    .time {
        margin-top: 10px;
    }

    .answer-item {
        padding: 10px;
    }

    .question1 {
        padding: 10px 0;
    }

    .card-content {
        width: 590px;
        /*margin: 0 auto;*/
        margin-left: 19px;
        min-height: 700px;
        /*margin-top: 40px;*/
    }

    .button-content {
        width: 600px;
        /*margin: 10px;*/
        margin-left: 10px;
        margin-top: 10px;
    }

    .box-card {
        min-height: 500px;
    }

    .button-top {
        font-size: 30px;
        height: 40px;
    }


    .stu-answer-item {
        margin-right: 10px;
        margin-top: 10px;
        width: 50px;
        height: 50px;
    }

    .el-button + .el-button {
        margin-left: 0px;
    }

    .q-single {
        /*height: 90%;*/
        margin-bottom: 10px;
    }

</style>
